import Taro, {Component} from '@tarojs/taro'
import {View, Button, Text, Input, SwiperItem, Image, ScrollView} from '@tarojs/components'
import {AtModal, AtModalHeader, AtModalContent, AtModalAction, AtButton, AtIcon, AtActionSheet} from "taro-ui"
import {connect} from '@tarojs/redux'
import {
  set_userinfo, set_cart, set_goodslist, set_viplist, set_bind_car_num, set_progress,
  set_pushdata, set_pushdatanum, gohome_btn, set_cart_num, set_wxuser, set_user_address
} from '../../actions/IndexAction'

import './index.less'
import set from "../../apis/api"
import WXBizDataCrypt from "../../libs/WXBizDataCrypt"
import base from "../base"

import "./css/login.css"


class Login extends Component {
  constructor(props) {
    super(props)
    base(this)
    this.state = {
      mobile_open: false,
      mobile: "",
      code: "",
      witetime: 60,
      seconds: 0,
      mobile_code: "",
      showgetuserinfo: false,
    }
  }



  config = {
    navigationBarTitleText: '登陆',
    enablePullDownRefresh: true,
    navigationBarBackgroundColor: "#4bb33d",
    navigationBarTextStyle: "white"

  }

  onReachBottom() {

  }

  getusermobile(val) {
    wx.showLoading({title: "正在登录.."});
    var databody = {
      session_key: this.props.wxuser.wxuser.session_key,
      encryptedData: val.detail.encryptedData,
      iv: val.detail.iv,
      access_token: this.props.gytoken.gytoken,
      wxid: this.props.sys_config.sets.wxid,
      is_login:1
    }


    console.log(databody);
    console.log("=========")


    this.wx_request(set.deuserinfo, databody, "POST", {'Content-Type': 'application/x-www-form-urlencoded'}).then((res) => {

      // res.data.data = JSON.parse(res.data.data);
   //   this.props.dispatch(set_wxuser(Object.assign({},this.props.wxuser.wxuser,res.data.data)))
      this.setwxuser(res.data.data)

      wx.showToast({title:"登陆成功",icon:"none",duration:1800})

      setTimeout(() => {
        Taro.reLaunch({url: "/pages/index/index"})
      }, 500)


      wx.hideLoading();
      this.setState({
        showgetuserinfo: false
      })
    })


  }

  getuserinfo(val) {
    wx.showLoading({title: "加载中.."});
    if (val.detail.userInfo) {
      var wxuser = Object.assign({}, this.props.wxuser.wxuser, val.detail.userInfo);
      this.props.dispatch(set_wxuser(wxuser))
      wx.setStorageSync("wxuser", JSON.stringify(wxuser));
      if (!this.props.wxuser.wxuser.nickName) {

        var databody = {
          session_key: this.props.wxuser.wxuser.session_key,
          encryptedData: val.detail.encryptedData,
          iv: val.detail.iv,
          access_token: this.props.gytoken.gytoken,
          wxid: this.props.sys_config.sets.wxid,
        }
        console.log(databody);
        console.log("=========")


        this.wx_request(set.deuserinfo, databody, "POST", {'Content-Type': 'application/x-www-form-urlencoded'}).then((res) => {

          res.data.data = JSON.parse(res.data.data);
          console.log("userinfo", res.data.data);
          this.props.dispatch(set_wxuser(wxuser))
          wx.hideLoading();
          this.setState({
            showgetuserinfo: false
          })
        })
      } else {
        this.setState({
          showgetuserinfo: false
        })
        wx.hideLoading();
        wx.showToast({title: "获取微信用户信息成功", icon: "none"})
      }


    } else {
      wx.hideLoading();
    }

  }

  componentWillReceiveProps(nextProps) {

  }

  onPullDownRefresh() {
    // this.fetchData()
    wx.stopPullDownRefresh()
  }

  componentWillUnmount() {
    clearInterval(this.interval)
  }

  componentWillMount() {


  }

  componentDidShow() {

    wx.showLoading({title: "加载中..", mask: true})

    if(!this.props.wxuser.wxuser.nickName)
    {
      this.setState({
        showgetuserinfo:true,
      })
    }
    wx.hideLoading()
  }


  dologin() {

    //访问发送接口
    var databody = {
      access_token: this.props.gytoken.gytoken,
      mobile: this.props.wxuser.wxuser.phoneNumber,
      openid: this.props.wxuser.wxuser.openid,
      unionid: this.props.wxuser.wxuser.unionid,
      code: this.state.code,
      wx_nickName: this.props.wxuser.wxuser.nickName,
      wx_avatarUrl: this.props.wxuser.wxuser.avatarUrl,
    }
    var that = this
    wx.request({
      url: set.tel_login,
      data: databody,
      header: {
        'Accept': 'application/login',
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      method: "POST",
      success(res) {
        wx.hideLoading();
        console.log(res)
        if (parseInt(res.data.status) == 100) {
          wx.showToast({title: "登录成功", icon: "none",duration: 1800})

          setTimeout(() => {
            Taro.reLaunch({url: "/pages/index/index"})
          }, 500)

        } else {

          Taro.showToast({title: res.data.msg, icon: "none", duration: 1800})
          setTimeout(() => {
            //     Taro.reLaunch({url: "/pages/index/index"})
          }, 500)
          return;
        }
      },
      fail(res) {
        wx.hideLoading();
        wx.showToast({title: "网络访问失败，请重试", icon: "none", duration: 1800})

      }
    })


    // setTimeout(() => {
    //   wx.hideLoading()
    // }, 2000)
  }


  getphone(phone) {
    var mobile = {}
    console.log(phone.detail)
    if (phone.detail.encryptedData) {
      wx.showLoading({title: "正在登录.."})
      this.getusermobile(phone)

    } else {
      return;
    }


  }

  inputmobile(event) {
    this.setState({
      mobile: event.detail.value
    })
  }

  inputcode(event) {
    this.setState({
      code: event.detail.value
    })
  }

  openMobile() {
    this.setState({
      mobile_open: true
    })
  }

  closeMobile() {
    this.setState({
      mobile_open: false
    })
  }

  componentDidHide() {
  }

  hideu() {
    console.log("cccccccc")
    this.setState({
      showgetuserinfo: false
    })
  }

  render() {

    var c = this.state.showgetuserinfo ? 'show' : 'hide';
    return (
      <View style={{backgroundColor: "#ffffff", height: "100vh", paddingTop: "105rpx",
        backgroundImage: `url("http://wx.engconn.com/static/images-lp/bg.png")`,
        backgroundRepeat: "no-repeat",
        backgroundSize: "cover",
      }}>
        <View >
          {/*<View*/}
          {/*style={{*/}
          {/*backgroundColor: "#cc0033",*/}
          {/*height: "105rpx",*/}
          {/*display: "flex",*/}
          {/*justifyContent: "center",*/}
          {/*alignItems: "flex-end",*/}
          {/*paddingBottom: "10rpx",*/}
          {/*position: "fixed",*/}
          {/*top: "0rpx",*/}
          {/*left: "0rpx",*/}
          {/*right: "0rpx",*/}
          {/*zIndex: 99*/}
          {/*}}>*/}
          {/*<View*/}
          {/*onClick={this.back.bind(this)}*/}
          {/*style={{*/}
          {/*height: "80rpx",*/}
          {/*width: "70rpx",*/}
          {/*display: "flex",*/}
          {/*alignItems: "flex-end",*/}
          {/*justifyContent: "center"*/}
          {/*}}>*/}
          {/*<Image src={require("../../assets/images/left.png")} style={{width: "50rpx", height: "50rpx"}}/>*/}
          {/*</View>*/}
          {/*<View style={{flex: 1, display: "flex", alignItems: "flex-end", justifyContent: "center"}}>*/}
          {/*<Text style={{color: "#ffffff", fontSize: "36rpx", fontWeight: "bold"}}>亨亨登陆</Text>*/}
          {/*</View>*/}
          {/*<View style={{height: "80rpx", width: "70rpx", display: "flex", alignItems: "flex-end"}}>*/}
          {/*/!*<Image src={require("../../assets/images/left.png")} style={{width:"50rpx",height:"50rpx"}}/>*!/*/}
          {/*</View>*/}
          {/*</View>*/}
          <ScrollView style={{flex: 1, minHeight: "90vh", display: "flex"}}>
            <View style={{minHeight: "90vh", position: "relative"}}>
              <View style={{position: "absolute", top: "5%", left: 0, right: 0, padding: "20rpx"}}>
                <View style={{display: "flex", justifyContent: "center", width: "100%", marginBottom: "40rpx"}}>
                  <Image src={"http://wx.engconn.com/static/uploads/2020-01-11/111971578673309.png"} mode={"widthFix"} style={{width:"100rpx",height:"100rpx"}}/>
                </View>
                <View style={{
                  width: "100%",
                  alignItems: "center",
                  justifyContent: "center",
                  display: "flex",
                }}>
                  <Text style={{color: "#333333", fontSize: "30rpx"}}>基站监测数据平台</Text>
                </View>
                <View style={{
                  width: "100%",
                  alignItems: "center",
                  justifyContent: "center",
                  display: "flex",
                  marginTop:"10rpx"
                }}>
                  <Text style={{color: "#666666", fontSize: "26rpx"}}>BASE STATION MONIORING DATA PLATFORM</Text>
                </View>
                <View style={{
                  width: "100%",
                  alignItems: "center",
                  justifyContent: "center",
                  display: "flex",
                  marginTop:"20rpx"
                }}>
                  <Text style={{color: "#666666", fontSize: "24rpx"}}>该系统实现对基站全方位监控</Text>
                </View>
                <View style={{
                  width: "100%",
                  alignItems: "center",
                  justifyContent: "center",
                  display: "flex",
                  marginTop:"10rpx"
                }}>
                  <Text style={{color: "#666666", fontSize: "24rpx"}}>提高施工人员工作效率，远程监控设备安全</Text>
                </View>
                <View style={{display: "flex", justifyContent: "center", width: "100%", marginTop: "40rpx"}}>
                  <Image src={"http://wx.engconn.com/static/uploads/2020-01-11/320591578673328.png"} mode={"widthFix"} style={{width:"60%"}}/>
                </View>




                <View style={{width: "100%",marginTop:"40rpx"}}>
                  <Button
                    class={"sqbtn"}
                    open-type="getPhoneNumber"
                    onGetPhoneNumber={this.getphone.bind(this)}
                  >
                    <View style={{
                      flex: 1,
                      alignItems: "center",
                      justifyContent: "center",
                      display: "flex",
                      height: "90rpx"
                    }}>
                      <Text style={{fontSize: "30rpx"}}>
                        微信登陆
                      </Text>
                    </View>

                  </Button>
                </View>
                {/*<View style={{width: "100%"}}>*/}
                  {/*<AtButton*/}
                    {/*type="primary"*/}
                    {/*open-type="getPhoneNumber"*/}
                    {/*onGetPhoneNumber={this.getphone.bind(this)}*/}

                  {/*>*/}
                    {/*<View style={{*/}
                      {/*flex: 1,*/}
                      {/*alignItems: "center",*/}
                      {/*justifyContent: "center",*/}
                      {/*display: "flex",*/}
                      {/*height: "90rpx"*/}
                    {/*}}>*/}
                      {/*<AtIcon prefixClass='icon' value='weixin' size='20' color='#ffffff'></AtIcon>*/}
                      {/*<Text style={{marginLeft: "50rpx"}}>*/}
                        {/*微信登陆*/}
                      {/*</Text>*/}
                    {/*</View>*/}

                  {/*</AtButton>*/}
                {/*</View>*/}
                {/*<View style={{width: "100%", marginTop: "30rpx"}}>*/}
                {/*<View*/}
                {/*style={{width: "100%", border: "solid #999999 2rpx", borderRadius: "10rpx"}}*/}
                {/*onClick={this.openMobile.bind(this)}*/}
                {/*>*/}
                {/*<View style={{*/}
                {/*flex: 1,*/}
                {/*alignItems: "center",*/}
                {/*justifyContent: "center",*/}
                {/*display: "flex",*/}
                {/*height: "86rpx"*/}
                {/*}}>*/}
                {/*<AtIcon prefixClass='icon' value='shouji' size='24' color='#999999'></AtIcon>*/}

                {/*<Text style={{marginLeft: "50rpx", color: "#999999"}}>*/}
                {/*手机登陆*/}
                {/*</Text>*/}
                {/*</View>*/}
                {/*</View>*/}
                {/*</View>*/}
              </View>
            </View>
          </ScrollView>
        </View>
        <AtActionSheet isOpened={this.state.mobile_open} onClose={this.closeMobile.bind(this)}>
          <View style={{height: "600rpx"}}>
            <View style={{
              height: "80rpx",
              width: "100%",
              alignItems: "center",
              justifyContent: "center",
              borderBottom: "1rpx solid #f0f2f5",
              display: "flex"
            }}>
              <Text style={{color: "#666666", fontSize: "32rpx"}}>手机登陆</Text>
            </View>
            <View style={{padding: "20rpx"}}>
              <View style={{
                margin: "10rpx",
                padding: "0rpx 10rpx 10rpx 10rpx",
                borderBottom: "2rpx solid #f0f2f5",
                display: "flex"
              }}>
                <AtIcon prefixClass='icon' value='shouji' size='24' color='#999999'></AtIcon>
                <Input type="number" confirmType={"完成"} maxlength={11} onInput={this.inputmobile.bind(this)} style={{
                  flex: 1,
                  textAlign: "left",
                  marginLeft: "40rpx",
                  marginRight: "20rpx",
                  fontSize: "26rpx"
                }} placeholder="输入手机号"/>
                <AtButton size="small" onClick={this.getcode.bind(this)} disabled={this.state.seconds > 0}>
                  <View>
                    <Text>{this.state.seconds > 0 ? this.state.seconds + " 秒" : "获取验证码"}</Text>
                  </View>

                </AtButton>

              </View>
              <View style={{
                margin: "10rpx",
                padding: "20rpx 10rpx 20rpx 10rpx",
                borderBottom: "2rpx solid #f0f2f5",
                display: "flex"
              }}>
                <AtIcon prefixClass='icon' value='suo' size='24' color='#999999'></AtIcon>
                <Input type="number" maxlength={6} onInput={this.inputcode.bind(this)} style={{
                  flex: 1,
                  textAlign: "left",
                  marginLeft: "40rpx",
                  marginRight: "20rpx",
                  fontSize: "26rpx"
                }} placeholder="输入验证码"/>


              </View>
              <View
                style={{
                  width: "100%",
                  borderRadius: "10rpx",
                  backgroundColor: "#cc0033",
                  margin: "30rpx 10rpx 10rpx 10rpx"
                }}
                onClick={this.dologin.bind(this, 11)}
              >
                <View
                  style={{flex: 1, alignItems: "center", justifyContent: "center", display: "flex", height: "80rpx"}}>

                  <Text style={{color: "#ffffff", fontSize: "28rpx"}}>
                    登 录
                  </Text>
                </View>
              </View>
              <View
                style={{
                  width: "100%",
                  borderRadius: "10rpx",
                  border: "2rpx solid #999999",
                  margin: "30rpx 10rpx 10rpx 10rpx"
                }}
                onClick={this.closeMobile.bind(this)}
              >
                <View
                  style={{flex: 1, alignItems: "center", justifyContent: "center", display: "flex", height: "76rpx"}}>

                  <Text style={{color: "#999999", fontSize: "28rpx"}}>
                    取 消
                  </Text>
                </View>
              </View>


            </View>

          </View>
        </AtActionSheet>

        {this.state.showgetuserinfo && <View className={c} style={{
          backgroundImage: `url("http://wx.engconn.com/static/images-lp/bg.png")`,
          backgroundRepeat: "no-repeat",
          backgroundSize: "cover",
        }}>
          <ScrollView >
            <View style={{minHeight: "100vh", position: "relative"}}>
              <View style={{position: "absolute", top: "10%", left: 0, right: 0, padding: "20rpx"}}>
                <View style={{display: "flex", justifyContent: "center", width: "100%", marginBottom: "40rpx"}}>
                  <Image src={"http://wx.engconn.com/static/uploads/2020-01-11/111971578673309.png"} mode={"widthFix"} style={{width:"100rpx"}}/>
                </View>
                <View style={{
                  width: "100%",
                  alignItems: "center",
                  justifyContent: "center",
                  display: "flex",
                }}>
                  <Text style={{color: "#333333", fontSize: "30rpx"}}>基站监测数据平台</Text>
                </View>
                <View style={{
                  width: "100%",
                  alignItems: "center",
                  justifyContent: "center",
                  display: "flex",
                  marginTop:"10rpx"
                }}>
                  <Text style={{color: "#666666", fontSize: "26rpx"}}>BASE STATION MONIORING DATA PLATFORM</Text>
                </View>
                <View style={{
                  width: "100%",
                  alignItems: "center",
                  justifyContent: "center",
                  display: "flex",
                  marginTop:"20rpx"
                }}>
                  <Text style={{color: "#666666", fontSize: "24rpx"}}>该系统实现对基站全方位监控</Text>
                </View>
                <View style={{
                  width: "100%",
                  alignItems: "center",
                  justifyContent: "center",
                  display: "flex",
                  marginTop:"10rpx"
                }}>
                  <Text style={{color: "#666666", fontSize: "24rpx"}}>提高施工人员工作效率，远程监控设备安全</Text>
                </View>
                <View style={{display: "flex", justifyContent: "center", width: "100%", marginTop: "40rpx"}}>
                  <Image src={"http://wx.engconn.com/static/uploads/2020-01-11/320591578673328.png"} mode={"widthFix"} style={{width:"60%"}}/>
                </View>




                <View style={{width: "100%",marginTop:"40rpx"}}>
                  <Button
                    class={"sqbtn"}
                    open-type="getUserInfo"
                    onGetUserInfo={this.getuserinfo.bind(this)}
                  >
                    <View style={{
                      flex: 1,
                      alignItems: "center",
                      justifyContent: "center",
                      display: "flex",
                      height: "90rpx"
                    }}>
                      <Text style={{fontSize: "30rpx"}}>
                        微信授权
                      </Text>
                    </View>

                  </Button>
                </View>
                <View style={{
                  width: "100%",
                  alignItems: "center",
                  justifyContent: "center",
                  display: "flex",
                  height: "60rpx",
                  marginTop:"20rpx"
                }}>
                  <Text style={{color: "#666666", fontSize: "26rpx"}}>请完成微信授权,以继续使用</Text>
                </View>

              </View>
            </View>

          </ScrollView>
        </View>}

        {/*<AtModal isOpened={this.state.showgetuserinfo} closeOnClickOverlay={false}>*/}
        {/*/!*<AtModalHeader>温馨提示</AtModalHeader>*!/*/}
        {/*<AtModalContent>*/}
        {/*恩杰康节能需要获取您的头像昵称等信息*/}
        {/*</AtModalContent>*/}
        {/*<AtModalAction><Button open-type="getUserInfo" size='small' onGetUserInfo={this.getuserinfo.bind(this)}>确定</Button></AtModalAction>*/}
        {/*</AtModal>*/}
      </View>
    )
  }
}

const mapstate = state => {
  return {
    userinfo: state.usermodel,
    cart_num: state.cart_num,
    cart: state.cart,
    goodslist: state.goodslist,
    vip: state.vip,
    progress: state.progress,
    pushdata: state.pushdata,
    wxuser: state.wxusermodel,
    sys_config:state.sys_config,
    gytoken: state.gytoken
  }
}
export default connect(mapstate)(Login)

